<template>
  <div class="we_component we_cube">
    <div v-for="obj, n in data.areas" class="we_cube_item" :style="areaStyle(obj)">
      <a v-if="obj.link" :href="obj.link">
        <img :src="obj.url" alt="" width="100%" height="100%">
      </a>
      <img v-else :src="obj.url" alt="" width="100%" height="100%">
    </div>
  </div>
</template>
<script>
  export default {
    props: ['data'],
    methods: {
      // 返回选中区域的style
      areaStyle (obj) {
        const size = this.data.size
        const left = (obj.start - 1) % size < (obj.end - 1) % size ? obj.start : obj.end
        const top = obj.start < obj.end ? obj.start : obj.end
        return {
          width: (Math.abs((obj.start - 1) % size - (obj.end - 1) % size) + 1) / size * 100 + '%',
          height: (Math.abs(Math.floor((obj.start - 1) / size) - Math.floor((obj.end - 1) / size)) + 1) / size * 100 + '%',
          left: `${(left - 1) % size / size * 100}%`,
          top: `${Math.floor((top - 1) / size) / size * 100}%`,
          padding: this.data.margin + 'px'
        }
      }
    }
  }
</script>
